<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 弹出框（Popover）插件</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>



方法
下面是一些弹出框（Popover）插件中有用的方法：<br>
<!--
方法	描述	实例
Options: .popover(options)	向元素集合附加弹出框句柄。
$().popover(options)
Toggle: .popover('toggle')	切换显示/隐藏元素的弹出框。
$('#element').popover('toggle')
Show: .popover('show')	显示元素的弹出框。
$('#element').popover('show')
Hide: .popover('hide')	隐藏元素的弹出框。
$('#element').popover('hide')
Destroy: .popover('destroy')	隐藏并销毁元素的弹出框。
$('#element').popover('destroy')
-->



<div class="container" style="padding: 100px 50px 10px;">
    <button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body"
            data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容 —— show 方法">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary popover-hide" title="Popover title" data-container="body"
            data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容 —— hide 方法">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success popover-destroy" title="Popover title" data-container="body"
            data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容 —— destroy 方法">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning popover-toggle" title="Popover title" data-container="body"
            data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
        右侧的 Popover
    </button>
    <br><br><br><br><br><br>
    <p class="popover-options">
        <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
           data-container="body" data-toggle="popover" data-content="
         <h4>Popover 中的一些内容 —— options 方法</h4>">
            Popover
        </a>
    </p>
    <script>
        $(function () {
            $('.popover-show').popover('show');
        });
        $(function () {
            $('.popover-hide').popover('hide');
        });
        $(function () {
            $('.popover-destroy').popover('destroy');
        });
        $(function () {
            $('.popover-toggle').popover('toggle');
        });
        $(function () {
            $(".popover-options a").popover({html: true});
        });
    </script>
</div>

<br>事件:
下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。<br>


<!--
事件	描述	实例
show.bs.popover	当调用 show 实例方法时立即触发该事件。
$('#mypopover').on('show.bs.popover', function () {
// 执行一些动作...
})
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
$('#mypopover').on('shown.bs.popover', function () {
// 执行一些动作...
})
hide.bs.popover	当调用 hide 实例方法时立即触发该事件。
$('#mypopover').on('hide.bs.popover', function () {
// 执行一些动作...
})
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
$('#mypopover').on('hidden.bs.popover', function () {
// 执行一些动作...
})-->

<div clas="container" style="padding: 100px 50px 10px;">
    <button type="button" class="btn btn-primary popover-show" title="Popover title" data-container="body"
            data-toggle="popover" data-content="左侧的 Popover 中的一些内容 —— show 方法">
        左侧的 Popover
    </button>

</div>
<script>
    $(function () {
        $('.popover-show').popover('show');
    });
    $(function () {
        $('.popover-show').on('shown.bs.popover', function () {
            alert("当显示时警告消息");
        })
    });
</script>
</div>


</body>
</html>